<script setup lang="ts">
import { ref } from 'vue'
import { useMettingStore, useSettingStore, useUserStore } from '@/stores'
import { useRoute } from 'vue-router'
import { Socket } from 'socket.io-client'
import { watch } from 'vue'
const $route = useRoute()
const meetingStore = useMettingStore()
const settingStore = useSettingStore()
const userStore = useUserStore()
// 关闭获取开启语音
const audioFlag = ref(true)
// 关闭或者开启视频
const videoFlag = ref(true)

const account = ref(userStore.userInfo?.userInfo?.username)

watch(
  () => userStore.userInfo,
  (_newVal, _oldVal) => {
    account.value = userStore.userInfo.userInfo.username
  },
  {
    deep: true
  }
)
const { sock, roomId } = defineProps<{
  sock: Socket
  roomId: string
}>()

// 改变语音状态
const handelAudio = (status: boolean) => {
  audioFlag.value = status
  meetingStore.setMeetingStatus('audio', !audioFlag.value)
}

// 改变视频状态
const handelVideo = (status: boolean) => {
  videoFlag.value = status
  meetingStore.setMeetingStatus('video', !videoFlag.value)
}

// 改变聊天界面开关状态
const handelSendMsg = () => {
  settingStore.changeSendMsgStatus()
}

const { flag } = $route.query

// 结束会议
const endRoom = async () => {
  // 发送结束会议事件
  sock.emit('endRoom', roomId)
}

// 离开会议
const leaveRoom = () => {
  // 发送离开会议事件
  console.log(account)

  sock.emit('leaveRoom', roomId, account.value)
}
</script>
<template>
  <div class="video_setting">
    <ul>
      <li>
        <div class="close_audio" v-if="!audioFlag" @click="handelAudio(true)">
          <svg
            t="1696571911571"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="6021"
            width="24"
            height="24"
          >
            <path
              d="M728.32 442.837333V212.138667C728.32 95.488 630.912 0 512.085333 0 393.130667 0 295.936 95.488 295.936 212.138667v230.698666c0 116.650667 97.194667 212.138667 216.192 212.138667 118.826667 0 216.149333-95.530667 216.149333-212.138667z"
              p-id="6022"
            ></path>
            <path
              d="M827.392 431.658667c0 170.666667-141.397333 324.778667-315.306667 324.778666-173.866667 0-315.264-154.112-315.264-324.778666 0-24.405333-20.181333-44.245333-45.098666-44.245334C126.848 387.413333 106.666667 407.253333 106.666667 431.658667c0 201.429333 153.216 386.048 351.317333 412.117333l0.128 127.232c0 29.098667 24.32 52.992 54.016 52.992 29.653333 0 54.016-23.893333 54.016-52.992l-0.128-127.232c198.101333-26.069333 351.317333-210.773333 351.317333-412.117333A44.416 44.416 0 0 0 872.533333 387.413333c-24.917333 0-45.098667 19.84-45.098666 44.245334z"
              p-id="6023"
            ></path>
          </svg>
          <span>关闭语音</span>
        </div>
        <div class="open_audio" v-else @click="handelAudio(false)">
          <svg
            t="1696572024664"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7182"
            width="24"
            height="24"
          >
            <path
              d="M512 722.4c34.4 0 66.4-8 95.2-22.4L300 263.2v246.4c0 117.6 95.2 212.8 212 212.8zM724 509.6V219.2C724 102.4 629.6 7.2 512 7.2c-77.6 0-144.8 41.6-182.4 103.2l361.6 512.8c20.8-33.6 32.8-72 32.8-113.6zM858.4 509.6c0-18.4-15.2-33.6-33.6-33.6-18.4 0-33.6 15.2-33.6 33.6 0 64-21.6 124-58.4 171.2l40 56.8c53.6-61.6 85.6-140.8 85.6-228z"
              fill="#040000"
              p-id="7183"
            ></path>
            <path
              d="M691.2 956.8H545.6v-102.4c50.4-4.8 98.4-20.8 140-44.8l-38.4-55.2c-40 21.6-85.6 34.4-134.4 34.4-154.4 0-279.2-124.8-279.2-279.2 0-18.4-15.2-33.6-33.6-33.6-18.4 0-33.6 15.2-33.6 33.6 0 178.4 135.2 327.2 312.8 344.8v102.4H332.8c-18.4 0-33.6 15.2-33.6 33.6 0 18.4 15.2 33.6 33.6 33.6h357.6c18.4 0 33.6-15.2 33.6-33.6 0-18.4-14.4-33.6-32.8-33.6zM236.8 15.2c-11.2-16-33.6-20-49.6-8.8C172 17.6 168 40 179.2 56l608.8 863.2c7.2 9.6 17.6 15.2 28.8 15.2 7.2 0 14.4-2.4 20-6.4 16-11.2 20-33.6 8.8-49.6L236.8 15.2z"
              fill="#040000"
              p-id="7184"
            ></path>
          </svg>
          <span>开启语音</span>
        </div>
      </li>
      <li>
        <div class="close_video" v-if="!videoFlag" @click="handelVideo(true)">
          <svg
            t="1696572318201"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="13772"
            width="22"
            height="22"
          >
            <path
              d="M838.1952 385.6896l139.3152-79.36c25.1392-15.36 46.4896-2.56 46.4896 23.04V757.76c0 28.2112-21.3504 38.4512-46.4896 23.0912l-139.3152-79.36c-25.856-15.4112-46.5408-30.72-46.5408-56.32V439.4496c0-25.6 21.4016-38.4 46.5408-53.76zM648.4992 204.8H98.304A97.7408 97.7408 0 0 0 0 302.08v478.72a97.6896 97.6896 0 0 0 98.1504 97.28h550.4a97.6896 97.6896 0 0 0 98.048-97.28V302.08A97.6896 97.6896 0 0 0 648.6016 204.8h-0.1024zM185.0368 503.4496a85.2992 85.2992 0 1 1 0-170.6496 85.2992 85.2992 0 0 1 0 170.6496z"
              fill="#000000"
              p-id="13773"
            ></path>
          </svg>
          <span>关闭视频</span>
        </div>
        <div class="open_video" v-else @click="handelVideo(false)">
          <svg
            t="1696572383959"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="13978"
            width="22"
            height="22"
          >
            <path
              d="M635.157333 181.333333L260.565333 830.144H106.666667a85.333333 85.333333 0 0 1-85.333334-85.333333V266.666667a85.333333 85.333333 0 0 1 85.333334-85.333334h528.490666z m124.8 85.333334v478.165333a85.333333 85.333333 0 0 1-85.333333 85.333333l-290.901333-0.021333L740.458667 212.373333c12.16 14.741333 19.498667 33.664 19.498666 54.293334z m-581.333333 6.314666a64 64 0 1 0 0 128 64 64 0 0 0 0-128zM973.632 289.984c11.221333 9.642667 17.685333 23.68 17.685333 38.485333v374.826667a50.730667 50.730667 0 0 1-89.216 33.024l-68.650666-80a85.333333 85.333333 0 0 1-20.565334-55.573333v-169.728a85.333333 85.333333 0 0 1 20.565334-55.573334l68.650666-80a50.730667 50.730667 0 0 1 71.530667-5.461333z"
              fill="#333333"
              p-id="13979"
            ></path>
            <path
              d="M768 57.92c15.296 8.853333 19.648 29.952 9.728 47.168L301.696 929.578667c-9.92 17.216-30.4 24-45.696 15.146666-15.296-8.832-19.648-29.930667-9.728-47.146666L722.304 73.088c9.92-17.216 30.4-24 45.696-15.146667z"
              fill="#FE4444"
              p-id="13980"
            ></path>
          </svg>
          <span>开启视频</span>
        </div>
      </li>
      <li>
        <div class="sendMsg" @click="handelSendMsg">
          <svg
            t="1699360103703"
            class="icon"
            viewBox="0 0 1024 1024"
            version="1.1"
            xmlns="http://www.w3.org/2000/svg"
            p-id="7990"
            width="22"
            height="22"
          >
            <path
              d="M866.133333 155.733333H157.866667c-46.933333 0-85.333333 38.4-85.333334 85.333334v605.866666c0 55.466667 64 85.333333 106.666667 49.066667l145.066667-123.733333h544c46.933333 0 85.333333-38.4 85.333333-85.333334V241.066667c-2.133333-46.933333-40.533333-85.333333-87.466667-85.333334zM620.8 535.466667h-384c-12.8 0-21.333333-8.533333-21.333333-21.333334s8.533333-21.333333 21.333333-21.333333h384c12.8 0 21.333333 8.533333 21.333333 21.333333s-8.533333 21.333333-21.333333 21.333334z m149.333333-170.666667h-533.333333c-12.8 0-21.333333-8.533333-21.333333-21.333333s8.533333-21.333333 21.333333-21.333334h533.333333c12.8 0 21.333333 8.533333 21.333334 21.333334s-8.533333 21.333333-21.333334 21.333333z"
              fill="#333333"
              p-id="7991"
            ></path>
          </svg>
          <span>聊天</span>
        </div>
      </li>
      <li>
        <el-button type="danger" plain v-if="flag === '0'" @click="endRoom"
          >结束会议</el-button
        >
        <el-button type="danger" plain v-else @click="leaveRoom"
          >离开会议</el-button
        >
      </li>
    </ul>
  </div>
</template>

<style scoped lang="less">
.video_setting {
  height: 10%;
  ul {
    position: relative;
    width: 100%;
    display: flex;
    align-items: center;
    padding: 10px;
    height: 100%;
    li {
      list-style: none;
      height: 100%;
      margin-right: 20px;
      display: flex;
      align-items: center;
      cursor: pointer;
      &:not(:last-child):hover {
        background-color: rgba(0, 0, 0, 0.1);
      }
      &:last-child {
        margin-left: auto;
      }
      div {
        height: 80%;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: space-between;
      }
    }
  }
}
</style>
